<template>
  <div class="app">
    <h1>当前计数为：{{ state.counter }}</h1>
    <button @click="increment">+</button>
  </div>
</template>
<script>
import { reactive } from 'vue'

// optoins
export default {
  // data() {
  //   return {
  //     counter: 100
  //   }
  // },
  // methods: {
  //   increment() {
  //     this.counter++
  //   }
  // }
  // composition api
  setup() {
    const state = reactive({
      counter: 100
    })

    const increment = () => {
      state.counter++
    }

    return {
      state,
      increment
    }
  }
}
</script>
<style lang="scss" scoped></style>
